<template>
    <div id="header_layout">
        <div id="header_layout1">
            <el-avatar class="header-image"
                       src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
            <span id="header-text" style="width: 150px">Elegant</span>
            <el-icon v-if="menuCollapse" @click="store.commit('localStorage/menuCollapse',!menuCollapse)">
                <Expand/>
            </el-icon>
            <el-icon v-else @click="store.commit('localStorage/menuCollapse',!menuCollapse)">
                <Fold/>
            </el-icon>
        </div>
        <el-scrollbar v-if="showHeaderMenu">
            <div id="header_layout2">
                <div class="headerMenuItem" :class="{'is-active':item.isHeaderActive}" :id="item.id" @click="headerMenuChange(item)"
                     v-for="item in menuList">
                    <div style="text-align: center;align-items: center;width: 100%">{{ item.name }}</div>
                </div>

            </div>
        </el-scrollbar>
        <span style="background: red;display: inline-block;flex-grow: 1;"></span>
        <div id="header_layout3">
            <el-button @click="store.commit('localStorage/showHeaderMenu',!showHeaderMenu)">{{ showHeaderMenu }}</el-button>
            <el-button @click="logout()">退出登陆</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import store from "@/store";
    import {computed, onMounted} from "vue";
    import {SysMenuTree} from "@/api/sys/SysMenuApi";
    import {logout} from "@/common/LoginService";
    import {useRoute} from "vue-router";
    import {changeHeader, getLevel1ByPath, getMenuByPath} from "../../../common/MenuUtils";

    let menuCollapse = computed<boolean>(() => store.state.localStorage.menuCollapse);
    let menuList = computed<SysMenuTree[]>(() => store.state.localStorage.menuList);
    let showHeaderMenu = computed<boolean>(() => store.getters["localStorage/showHeaderMenu"]());

    function headerMenuChange(menuItem) {
        for (const menu of menuList.value) {
            menu.isHeaderActive = false;
        }
        menuItem.isHeaderActive = true;
    }


    onMounted(() => {
        changeHeader(useRoute().path)

    });
</script>

<script lang="ts">
    export default {
        name: 'HomeHeader',
    }

</script>
<style scoped>
    #header_layout {
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
    }

    .el-icon {
        color: white;
        font-size: 25px;
    }

    #header-text {
        font-size: 25px;
        color: white;
        font-weight: bold;
        font-style: italic;
    }


    #header_layout1 {
        margin-right: 20px;
        display: flex;
        align-items: center;
        width: 240px;
    }

    #header_layout2 {
        height: 60px;
        color: white;
        display: flex;
        align-items: center;
    }

    .headerMenuItem {
        text-align: center;
        display: flex;
        align-items: center;
        height: 35px;
        font-weight: bold;
        min-width: 120px;
        color: white;
        font-size: 15px;
        user-select: none;
        cursor: pointer;
        border-radius: 5px;
    }

    .headerMenuItem.is-active {
        background-color: #1F5995;
        color: #D6771E;
    }

    #header_layout3 {
        height: 100%;
        margin-left: 20px;
        background-color: #337ecc;
    }
</style>